<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片视频下载器 - 设置</title>
    <link rel="stylesheet" href="options.css">
</head>

<body>
    <!-- 主容器 -->
    <div class="options-container">
        <!-- 头部 -->
        <div class="options-header">
            <div class="header-content">
                <img src="../icons/icon48.png" alt="图标" class="header-icon">
                <div class="header-info">
                    <h1>图片视频下载器</h1>
                    <p>版本 1.0.0</p>
                </div>
            </div>
            <div class="header-actions">
                <button class="btn-secondary" id="resetBtn">重置设置</button>
                <button class="btn-primary" id="saveBtn">保存设置</button>
            </div>
        </div>

        <!-- 设置内容 -->
        <div class="options-content">
            <!-- 侧边栏导航 -->
            <div class="sidebar">
                <nav class="nav-menu">
                    <a href="#general" class="nav-item active" data-section="general">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
                        </svg>
                        常规设置
                    </a>
                    <a href="#download" class="nav-item" data-section="download">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
                        </svg>
                        下载设置
                    </a>
                    <a href="#advanced" class="nav-item" data-section="advanced">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.22,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.22,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.68 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z" />
                        </svg>
                        高级设置
                    </a>
                    <a href="#about" class="nav-item" data-section="about">
                        <svg viewBox="0 0 24 24" fill="currentColor">
                            <path
                                d="M13,9H11V7H13M13,17H11V11H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
                        </svg>
                        关于
                    </a>
                </nav>
            </div>

            <!-- 主内容区域 -->
            <div class="main-content">
                <!-- 常规设置 -->
                <div class="settings-section active" id="general">
                    <h2>常规设置</h2>

                    <div class="setting-group">
                        <h3>界面设置</h3>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="theme">主题</label>
                                <span class="setting-description">选择界面主题</span>
                            </div>
                            <div class="setting-control">
                                <select id="theme" class="form-select">
                                    <option value="light">浅色主题</option>
                                    <option value="dark">深色主题</option>
                                    <option value="auto">跟随系统</option>
                                </select>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="language">语言</label>
                                <span class="setting-description">选择界面语言</span>
                            </div>
                            <div class="setting-control">
                                <select id="language" class="form-select">
                                    <option value="zh-CN">简体中文</option>
                                    <option value="en-US">English</option>
                                    <option value="ja-JP">日本語</option>
                                </select>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="showNotifications">显示通知</label>
                                <span class="setting-description">下载完成时显示桌面通知</span>
                            </div>
                            <div class="setting-control">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="showNotifications">
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="autoScan">自动扫描</label>
                                <span class="setting-description">打开页面时自动扫描媒体</span>
                            </div>
                            <div class="setting-control">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="autoScan">
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 下载设置 -->
                <div class="settings-section" id="download">
                    <h2>下载设置</h2>

                    <div class="setting-group">
                        <h3>基本设置</h3>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="downloadPath">下载路径</label>
                                <span class="setting-description">文件保存的文件夹路径</span>
                            </div>
                            <div class="setting-control">
                                <input type="text" id="downloadPath" class="form-input" placeholder="downloads">
                                <button class="btn-secondary" id="browsePathBtn">浏览</button>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="filenamePattern">文件名格式</label>
                                <span class="setting-description">支持变量: {filename}, {title}, {type}, {timestamp}</span>
                            </div>
                            <div class="setting-control">
                                <input type="text" id="filenamePattern" class="form-input" placeholder="{filename}">
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="maxConcurrent">最大并发数</label>
                                <span class="setting-description">同时下载的文件数量</span>
                            </div>
                            <div class="setting-control">
                                <input type="number" id="maxConcurrent" class="form-input" min="1" max="10" value="3">
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="maxFileSize">最大文件大小</label>
                                <span class="setting-description">单个文件的最大下载大小 (MB)</span>
                            </div>
                            <div class="setting-control">
                                <input type="number" id="maxFileSize" class="form-input" min="1" max="1000" value="100">
                                <span class="unit">MB</span>
                            </div>
                        </div>
                    </div>

                    <div class="setting-group">
                        <h3>文件类型</h3>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label>支持的图片格式</label>
                                <span class="setting-description">选择要下载的图片格式</span>
                            </div>
                            <div class="setting-control">
                                <div class="format-tags" id="imageFormats">
                                    <label class="format-tag">
                                        <input type="checkbox" value="jpg" checked>
                                        <span>JPG</span>
                                    </label>
                                    <label class="format-tag">
                                        <input type="checkbox" value="png" checked>
                                        <span>PNG</span>
                                    </label>
                                    <label class="format-tag">
                                        <input type="checkbox" value="gif" checked>
                                        <span>GIF</span>
                                    </label>
                                    <label class="format-tag">
                                        <input type="checkbox" value="webp" checked>
                                        <span>WebP</span>
                                    </label>
                                    <label class="format-tag">
                                        <input type="checkbox" value="svg">
                                        <span>SVG</span>
                                    </label>
                                </div>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label>支持的视频格式</label>
                                <span class="setting-description">选择要下载的视频格式</span>
                            </div>
                            <div class="setting-control">
                                <div class="format-tags" id="videoFormats">
                                    <label class="format-tag">
                                        <input type="checkbox" value="mp4" checked>
                                        <span>MP4</span>
                                    </label>
                                    <label class="format-tag">
                                        <input type="checkbox" value="webm" checked>
                                        <span>WebM</span>
                                    </label>
                                    <label class="format-tag">
                                        <input type="checkbox" value="avi">
                                        <span>AVI</span>
                                    </label>
                                    <label class="format-tag">
                                        <input type="checkbox" value="mov">
                                        <span>MOV</span>
                                    </label>
                                    <label class="format-tag">
                                        <input type="checkbox" value="mkv">
                                        <span>MKV</span>
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 高级设置 -->
                <div class="settings-section" id="advanced">
                    <h2>高级设置</h2>

                    <div class="setting-group">
                        <h3>性能设置</h3>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="enableLogging">启用日志</label>
                                <span class="setting-description">记录详细的操作日志</span>
                            </div>
                            <div class="setting-control">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="enableLogging">
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="saveDownloadHistory">保存下载历史</label>
                                <span class="setting-description">记录下载历史以便查看</span>
                            </div>
                            <div class="setting-control">
                                <label class="toggle-switch">
                                    <input type="checkbox" id="saveDownloadHistory" checked>
                                    <span class="toggle-slider"></span>
                                </label>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label for="maxHistoryItems">最大历史记录数</label>
                                <span class="setting-description">保存的下载历史记录数量</span>
                            </div>
                            <div class="setting-control">
                                <input type="number" id="maxHistoryItems" class="form-input" min="100" max="10000"
                                    value="1000">
                            </div>
                        </div>
                    </div>

                    <div class="setting-group">
                        <h3>数据管理</h3>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label>数据操作</label>
                                <span class="setting-description">管理扩展数据</span>
                            </div>
                            <div class="setting-control">
                                <div class="button-group">
                                    <button class="btn-secondary" id="exportDataBtn">导出数据</button>
                                    <button class="btn-secondary" id="importDataBtn">导入数据</button>
                                    <button class="btn-secondary" id="clearHistoryBtn">清空历史</button>
                                </div>
                            </div>
                        </div>

                        <div class="setting-item">
                            <div class="setting-label">
                                <label>存储使用情况</label>
                                <span class="setting-description">当前存储空间使用情况</span>
                            </div>
                            <div class="setting-control">
                                <div class="storage-info" id="storageInfo">
                                    <div class="storage-bar">
                                        <div class="storage-fill" id="storageFill"></div>
                                    </div>
                                    <span class="storage-text" id="storageText">0 B / 5 MB</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 关于 -->
                <div class="settings-section" id="about">
                    <h2>关于</h2>

                    <div class="about-content">
                        <div class="about-header">
                            <img src="../icons/icon128.png" alt="图标" class="about-icon">
                            <div class="about-info">
                                <h3>图片视频下载器</h3>
                                <p class="version">版本 1.0.0</p>
                                <p class="description">一个强大的Chrome扩展，帮助您轻松下载网页中的图片和视频文件。</p>
                            </div>
                        </div>

                        <div class="about-features">
                            <h4>主要功能</h4>
                            <ul>
                                <li>自动检测页面中的图片和视频</li>
                                <li>支持批量下载和选择性下载</li>
                                <li>右键菜单快速下载</li>
                                <li>下载进度跟踪</li>
                                <li>下载历史管理</li>
                                <li>自定义下载设置</li>
                            </ul>
                        </div>

                        <div class="about-links">
                            <h4>相关链接</h4>
                            <div class="link-group">
                                <a href="#" class="link-item" id="homepageLink">
                                    <svg viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z" />
                                    </svg>
                                    官方网站
                                </a>
                                <a href="#" class="link-item" id="githubLink">
                                    <svg viewBox="0 0 24 24" fill="currentColor">
                                        <path
                                            d="M12,2A10,10 0 0,0 2,12C2,16.42 4.87,20.17 8.84,21.5C9.34,21.58 9.5,21.27 9.5,21C9.5,20.77 9.5,20.14 9.5,19.31C6.73,19.91 6.14,17.97 6.14,17.97C5.68,16.81 5.03,16.5 5.03,16.5C4.12,15.88 5.1,15.9 5.1,15.9C6.1,15.97 6.63,16.93 6.63,16.93C7.5,18.45 8.97,18 9.54,17.76C9.63,17.11 9.89,16.67 10.17,16.42C7.95,16.17 5.62,15.31 5.62,11.5C5.62,10.39 6,9.5 6.65,8.79C6.55,8.54 6.2,7.5 6.75,6.15C6.75,6.15 7.59,5.88 9.5,7.17C10.29,6.95 11.15,6.84 12,6.84C12.85,6.84 13.71,6.95 14.5,7.17C16.41,5.88 17.25,6.15 17.25,6.15C17.8,7.5 17.45,8.54 17.35,8.79C18,9.5 18.38,10.39 18.38,11.5C18.38,15.32 16.04,16.16 13.81,16.41C14.17,16.72 14.5,17.33 14.5,18.26C14.5,19.6 14.5,20.68 14.5,21C14.5,21.27 14.66,21.59 15.17,21.5C19.14,20.16 22,16.42 22,12A10,10 0 0,0 12,2Z" />
                                    </svg>
                                    GitHub
                                </a>
                                <a href="#" class="link-item" id="feedbackLink">
                                    <svg viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M20,8H4V6H20M20,18H4V12H20M22,4H2V20H22V4Z" />
                                    </svg>
                                    反馈建议
                                </a>
                            </div>
                        </div>

                        <div class="about-license">
                            <h4>许可证</h4>
                            <p>本软件采用 MIT 许可证开源发布。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 文件选择器 -->
    <input type="file" id="importFileInput" accept=".json" style="display: none;">

    <script src="options.js"></script>
</body>

</html>